import imgDefaule from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  // 使用use自动调用install方法
  install (app) {
    // 创建自定义指令
    app.directive('imgLazy', {
      mounted (el, bind) {
        // 设置默认图片
        el.src = imgDefaule
        // 图片懒加载
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            if (isIntersecting) {
              // 如果进入可视范围
              stop()
              // 将图片路径更改
              el.src = bind.value
            }
          },
          { threshold: 0.1 }
        )
      }
    })
  }
}
